import { NavBar, DatePicker } from "antd-mobile";
import classNames from "classnames";
import "./index.scss";
import { useEffect, useMemo, useState } from "react";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "lodash";

import DayBill from "./components/DayBill";

const Month = () => {
  //按月做数据的分组
  const billList = useSelector((state) => state.bill.billList);
  const monthGroup = useMemo(() => {
    const temp = _.groupBy(billList, (item) =>
      dayjs(item.date).format("YYYY-MM")
    );
    return temp;
    // return  _.sortBy(temp, (value, key) => key);
  }, [billList]);

  //存储月份详细数据
  const [monthList, setMonthList] = useState([]);
  const monthResult = useMemo(() => {
    const pay = monthList
      .filter((item) => item.type === "pay")
      .reduce((a, c) => a + c.money, 0);
    const income = monthList
      .filter((item) => item.type === "income")
      .reduce((a, c) => a + c.money, 0);
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [monthList]);

  //当前月按照日来做分组
  const dayGroup = useMemo(() => {
    const groupData = _.groupBy(monthList, (item) =>
      dayjs(item.date).format("YYYY-MM-DD")
    );
    //const keys = Object.keys(groupData);
    //keys.sort();
    const temp = Object.keys(groupData);
    const keys = _.orderBy(temp, [(item) => item], ["desc"]);
    //const keys = _.orderBy(temp, "desc");
    return {
      groupData,
      keys,
    };
  }, [monthList]);

  //控制弹框的打开关闭
  const [dateVisible, setDateVisible] = useState(false);

  //控制时间显示
  const [currentDate, setCurrentDate] = useState(
    dayjs(new Date()).format("YYYY-MM")
  );
  const onConfirm = (date) => {
    setDateVisible(false);
    // console.log(`output->date`, date);
    const formateDate = dayjs(date).format("YYYY-MM");
    setCurrentDate(formateDate);
    setMonthList(monthGroup[formateDate] || []);
  };

  useEffect(() => {
    const formateDate = dayjs().format("YYYY-MM");
    setMonthList(monthGroup[formateDate] || []);
  }, [monthGroup]);

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        阅读收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">{currentDate}月账单</span>
            <span
              className={classNames("arrow", dateVisible && "expand")}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            max={new Date()}
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={() => setDateVisible(false)}
          />
        </div>
        {dayGroup.keys.map((key) => (
          <DayBill
            key={key}
            date={key}
            billList={dayGroup.groupData[key]}
          ></DayBill>
        ))}
      </div>
    </div>
  );
};
export default Month;
